<!DOCTYPE html>
<html>

<head>
 {include file="Public/header"}
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">

    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <style>
  .imgino{height: 68px;width: 68px;}
    ul li{list-style: none;}
    img[name="deng"]{width: 60px;height: 81px;}
    .sp{
      display: inline-block;
    padding-right: 38px;
    position: relative;
    /* height: 160px; */
    height: 125px;
    }
    .sp:first-child .bg{
          left: 50%;
        margin-left: -16px
    }
    .spPass{color: #75d343}
    .me{height: 89px}
    .me .passName{border: 2px solid #666666;}
    .me .passTop{border-color: #666666 transparent transparent;
    top:18%;}
    .me .passButtom{bottom: -37%;}
    .me .passIcon{    background: url(__STATIC__/layout/img/me.png);
    background-repeat: no-repeat;}
    .bg{
    background: url(__STATIC__/layout/img/bgd.png) repeat 0px 50px;
    position: absolute;
    width: 80%;
    height: 50%;
     z-index: 1; 
     top: 34%; 
    top: 43%;
    left: 40%;
    }
    .passName{
    border: 2px solid #28b76a;
    position: relative;
    padding: 0px 8px;
    border-radius: 4px;
    word-break: keep-all;
    z-index: 3; 
    line-height: 18px;}
  .passTop{
  position: absolute;
    left: 50%;
    top: 73%;
    margin-left: -6px;
    margin-top: 17px;
    display: block;
    width: 0;
    height: 0;
    border-width: 8px 6px 0;
    border-style: solid dashed dashed;
    border-color: #28B76A transparent transparent;
    font-size: 0;
    line-height: 0;
  }
  .passButtom{
      width: 0;
    height: 0;
    position: absolute;
    display: block;
    left: 50%;
    bottom:-6px;
    margin-left: -8px;
    margin-top: -9px;
    border-width: 10px 8px 0;
    border-style: dashed dashed solid;
    border-color:#fffefd transparent transparent;
    font-size: 0;
    line-height: 0;
  }
  .start .passIcon{
    background: url(__STATIC__/layout/img/tiJiaoLiuCheng.png);
       background-repeat: no-repeat
  }
  .passIcon{
      width: 20px;
        height: 57px;
        background: url(__STATIC__/layout/img/pass.png);
        display: block;
        margin-top: 28px;
        position: absolute;
         z-index: 2; 
        margin-left: -28px;
        left: 50%;
        background-repeat: no-repeat;
  }
  .shenpi{
        /*display: none;*/
        width: 200px;
        height: auto;
        position: absolute;
        padding: 5px 10px;
        border: 2px solid #bbbbbb;
        border-radius: 4px;
        margin-top: 40px;
        margin-left: -91px;
        background: #fffefd;
        z-index: 11;
  }
  .shenpi .top{
        width: 0;
    height: 0;
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    margin-left: -8px;
    margin-top: -12px;
    border-width: 0 8px 10px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #bbbbbb;
    font-size: 0;
    line-height: 0;
    background: #fffefd;
  }
  .shenpi .buttom{
        width: 0;
    height: 0;
    position: absolute;
    display: block;
    left: 50%;
    top: 0;
    margin-left: -8px;
    margin-top: -9px;
    border-width: 0 8px 10px;
    border-style: dashed dashed solid;
    border-color: transparent transparent #fffefd;
    font-size: 0;
    line-height: 0;
  }
  .dengPrice{font-size: 20px }
  .cainainActive{color: #54a9fc;border-bottom:2px solid #54a9fc;}
    </style>

</head>

<body class="gray-bg" style="padding: 3px;font-size: 13px">
  <div class="container bs-docs-container" style="background: #fff">
    <div class="bs-docs-section">
      <div class="bs-example bs-example-type">
      <table class="table row-margin-top text-center">
      <tbody>
        <tr class="text-center">
          <td style="border:0;position: relative;top:0;left: 0">
          {if $info.type_id==2}
            <img src="__STATIC__/layout/img/changGuiShenQing.png" style="float: left;" />
            {else/}
            <img src="__STATIC__/layout/img/feiChangGui.png" style="float: left;" />
            {/if}
            <div class="form-group text-center" style="float: left;margin-left: 31%">
             <h1>{$info.title}</h1>
                <p class="padding-10"> 编号：<span>{$feed.no}</span> <span class="lr_5"></span>申请人： <span>{$feed.user}({$feed.de_name})</span>  </p>
            </div>
            <img src="__STATIC__/layout/img/fankui.png" style="position: absolute;top:10px;right: 20px">
          </td>
        </tr>
   <tr>
   <td>  <h2 class="text-center">基本信息</h2>
            <img src="__STATIC__/layout/img/fengexian.png">
            <div class="row padding-10" style="margin: 20px 0 30px">

             <div class="col-md-2">
                                <img src="__STATIC__/layout/img/customerOrDealer.png" class="imgino">
                                <ul>
                                    <li class="text-success">区域/经销商</li>
                                    <li class="">{$info.zoning}/{$info.provice}/{$info.city}</li>
                                    <li class="">{$info.jxs_name}</li>
                                    <li class="colorRed">{$info.jxs_type}</li>
                                </ul>
                            </div>
              <div class="col-md-2">
                                <img src="__STATIC__/layout/img/activityXiTong.png" class="imgino">
                                <ul>
                                    <li class="text-success">系统</li>
                                    <li class="">{$info.xitong}</li>
                                    <li class="colorRed">{$info.xitongtype}</li>
                                    {if $system_num>1}<li class="">. . .</li>{/if}
                                    <li class="">（共 <span>{$system_num}</span>家系统）</li>
                                </ul>
                            </div>
               <div class="col-md-2">
                                <img src="__STATIC__/layout/img/activeMode.png" class="imgino">
                                <ul>
                                    <li class="text-success">活动网点</li>
                                    <li class="">{$info.net}</li>
                                    <li class="colorRed">{$info.nettype}</li>
                                    {if $net_num>1}<li class="">. . .</li>{/if}
                                    <li class="">（共 <span>{$net_num}</span>家网点）</li>
                                </ul>
                            </div>
             <div class="col-md-2">
                                <img src="__STATIC__/layout/img/activityTime.png" class="imgino">
                                <ul>
                                    <li class="text-success">活动时间</li>
                                    <li class="">从 <span>{:date('Y-m-d',$info.start)}</span></li>
                                    <li class="">到 <span>{:date('Y-m-d',$info.end)}</span></li>
                                    <li>
                                        {if $info.is_bu==1}<img src="__STATIC__/layout/img/budan.png">{/if}
                                    </li>
                                </ul>
                            </div>

                            <div class="col-md-2">
                                <img src="__STATIC__/layout/img/activityProduct.png" class="imgino">
                                <ul>
                                    <li class="text-success">活动{$info.pro_label}</li>
                                    <li class="">{$info.pro_name}</li>
                                    {if $info.p_cnt>1}<li class="">. . .</li>{/if}
                                    <li>({if $info.p_cnt}共 <span>{$info.p_cnt}个{$info.pro_label}</span>
                                        {/if})
                                    </li>
                                </ul>
                            </div>
                  <div class="col-md-2">
                                <img src="__STATIC__/layout/img/expenseType.png" class="imgino">
                                <ul>
                                    <li class="text-success">费用类型</li>
                                    <li class="">{$info.fylx_name}</li>
                                    {if $info.fylx>1}
                                    <li class="">. . .</li>
                                    {/if}
                                    <li class="">(共 <span>{$info.fylx}</span>种类型)</li>
                                </ul>
                            </div>
                <div class="col-md-2">
              
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>  
            <h2 class="text-center">整体情况</h2>
            <img src="__STATIC__/layout/img/fengexian.png">
            <div class="row row-margin-top padding-10">
               <div class="col-md-1"></div>
              <div class="col-md-2">
                <ul>
                  <li style="font-size: 18px">销量</li>
                  <li class="ckText">预计 <span class="ObjectNum">{$info.yujixl}</span>元</li>
                  <li>实际 <span class="ObjectNum">{$info.shijixl}</span>元</li>
                  <li class="text-center">
                    <div style="width: 140px;height: 70px;border: 3px solid #54a9fc;padding: 5px" class="form-group" >
                      <p style="text-align: center;">达成率</p>
                    <span style="font-size: 20px;color: #75d343">{$info.xldc}%</span>
                    {if $info.xldc>=100}
                      <img src="__STATIC__/layout/img/green_25.png" style="float: right;">
                      {elseif $info.xldc>=80}
                      <img src="__STATIC__/layout/img/yellow_25.png" style="float: right;">
                      {else/}
                      <img src="__STATIC__/layout/img/red_25.png" style="float: right;">
                      {/if}
                    </div>
                  </li>
                </ul> 
              </div>
              <div class="col-md-2">
                 <ul>
                  <li  style="font-size: 18px">花费</li>
                  <li class="ckText">预计 <span class="ObjectNum">{$info.yujihf}</span>元</li>
                  <li>实际 <span class="ObjectNum">{$info.shijihf}</span>元</li>
                  <li class="text-center">
                    <div style="width: 140px;height: 70px;border: 3px solid #54a9fc;padding: 5px" class="form-group" >
                      <p style="text-align: center;">使用率</p>
                      <span style="font-size: 20px;color: #75d343">{$info.hfdc}%</span>
                      {if $info.hfdc<=100}
                      <img src="__STATIC__/layout/img/green_25.png" style="float: right;">
                      {elseif $info.hfdc<=120}
                      <img src="__STATIC__/layout/img/yellow_25.png" style="float: right;">
                      {else/}
                      <img src="__STATIC__/layout/img/red_25.png" style="float: right;">
                      {/if}
                    </div>
                  </li>
                </ul> 
              </div>
               <div class="col-md-2">
                 <ul>
                  <li  style="font-size: 18px">费用率</li>
                  <li class="ckText">预计<span>{$info.yujifyl}</span>%</li>
                  <li>实际 <span>{$info.shijifyl}</span>%</li>
                  <li class="text-center">
                    <div style="width: 140px;height: 70px;border: 3px solid #54a9fc;padding: 5px" class="form-group" >
                      <p style="text-align: center;">差异</p>
                      <span style="font-size: 20px;color: #75d343">{$info.fylc}%</span>
                      {if $info.fylc<=0}
                      <img src="__STATIC__/layout/img/green_25.png" style="float: right;">
                     
                      {else/}
                      <img src="__STATIC__/layout/img/red_25.png" style="float: right;">
                      {/if}
                    </div>
                  </li>
                </ul> 
              </div>
                <div class="col-md-2">
                  <div style="font-size: 18px">网点销量完成情况</div>
                  <table class="table bud_hei">
                    <tr>
                      <td>好（≥100%）</td>
                      <td><span>{$info.you}</span>家</td>
                    </tr>
                      <tr>
                     <td>合格（≥80%）</td>
                      <td><span>{$info.liang}</span>家</td>
                    </tr>
                      <tr>
                     <td>差（ ＜80%）</td>
                      <td><span>{$info.cha}</span>家</td>
                    </tr>
                  </table>
              </div>
               <div class="col-md-2">
                  <div style="font-size: 18px">网点费用率情况</div>
                  <table class="table bud_hei">
                    <tr>
                      <td>>预计费用率</td>
                      <td><span>{$info.da}</span>家</td>
                    </tr>
                      <tr>
                      <td>≤预计费用率</td>
                      <td><span>{$info.xiao}</span>家</td>
                    </tr>
                  </table>
              </div>
              <div class="col-md-1"></div>
            </div>
              <div class="text-right">
                 <p class="padding-10 text-right"><button class="btn btn-sm btn-info btnActivity" type="button">查看网点详情</button><span class="lr_5"></span><button class="btn btn-sm btn-primary btnActivity1" type="button">查看科目详情</button><span class="lr_5"></span>
                <a class="btn btn-sm btn-primary"
                                                         href="{:url('shenhemx',['trackId'=>request()->param('trackId'),'workId'=>request()->param('workId'),'myId'=>request()->param('myId')])}">查看明细</a>
                 </p>
            </div>
               <table class="table table-bordered bud_hei text-right" id="kindGather" style="display: none;">
              <tr class="info text-center">
                <td>网点名称</td>
                <td>实际销量</td>
                <td>销量达成率</td>
                <td>实际费用额</td>
                <td>费用使用率</td>
                <td>实际费用率</td>
                
              </tr>
              {volist name="netarr" id="n"}
              <tr>
                <td class="text-center">{$n.net}</td>
                <td class="ObjectNum">{$n.fb_shijixiaoliang}</td>
                <td class="">{$n.xldc}%</td>
                <td class="ObjectNum">{$n.fb_shijitourufeiyong}</td>
                <td class="">{$n.fydc}%</td>
                <td class="">{$n.fyl}%</td>
                
              </tr>
             {/volist}
            </table>
              <table class="table row-margin-top table-bordered bud_hei text-right" id="netGather" style="display: none;">
              <tr class="info text-center">
                <td>三级费用科目</td>
                <td>网点数</td>
                <td>{$info.pro_label}数</td>
                <td>实际费用额</td>
                <td>费用使用率</td>
                <td>实际费用率</td>
                
              </tr>
              {volist name="feiarr" id="f"}
              <tr>
                <td class="text-left">{$f.fee}</td>
                <td class="text-center">{$f.net_num}</td>
                <td class="text-center">{$f.p_num}</td>
                <td class="ObjectNum">{$f.fb_shijitourufeiyong}</td>
                <td class="">{$f.fydc}%</td>
                <td class="">{$f.fyl}%</td>
                
              </tr>
              {/volist}
            </table>
          </td>
        </tr>
        <tr>
          <td>
           <h2 class="text-center">审批信息</h2>
                        <h6>本次申请已耗时 {$bcsqhs}</h6>
            <img src="__STATIC__/layout/img/fengexian.png">
         

          <div class="padding-10" style="margin-bottom: 30px">
                            {volist name="czjl" id="row" key="k"}
                            {if $k==1}
                            <div class="sp start">
                                <div class="bg"></div>
                                <div class="passName">
                                    <div class="passTop"></div>
                                    <div class="passButtom"></div>
                                    {$row.username}
                                    <br>{$row.nodename}
                                    <br>{$row.actiontime}
                                </div>
                                <span class="passIcon">
                                        <div class="shenpi" align="left" style="display: none;">
                                            <div class="top"></div>
                                            <div class="buttom"></div>
                                            提交人：<span>{$row.username}</span> <br>
                                            提交时间：<span>{$row.actiontime}</span><br>
                                        </div>
                                    </span>
                            </div>
                            {else}
                            <div class="sp">
                                <div class="bg"></div>
                                <div class="passName">
                                    <div class="passTop"></div>
                                    <div class="passButtom"></div>
                                    {$row.username}
                                    <br>{$row.nodename}
                                    <br>{$row.actiontime}
                                </div>
                                <span class="passIcon">
                                        <div class="shenpi" align="left" style="display: none;">
                                            <div class="top"></div>
                                            <div class="buttom"></div>
                                              审批人：<span>{$row.username}</span> <span class="spPass">{$row.memo}</span><br>
                                              审批时间：<span>{$row.actiontime}</span><br>
                                              审批意见：<span>ok</span>
                                        </div>
                                    </span>
                            </div>
                            {/if}
                            {/volist}
                            <div class="sp me">
                                <div class="passName">
                                    <div class="passTop"></div>
                                    <div class="passButtom"></div>
                                    我
                                </div>
                                <span class="passIcon">
                                        <div class="shenpi" align="center" style="display: none;">
                                            <div class="top"></div>
                                            <div class="buttom"></div>
                                            待审批
                                        </div>
                                    </span>
                            </div>
                        </div>
          </td>
        </tr>
       <tr>
        <td>
         
          <div class="row padding-10">
      <button class="btn btn-primary" type="button" id="tijiao">进入下一步</button>
      </div>
        </td>
       </tr>
      </tbody>
    </table>
      </div>
  </div>
  </div>
<{include file="Public/footer"}
<script src="__STATIC__/layout/js/contabs_sub.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script src="__STATIC__/layout/js/common.js"></script>
<script type="text/javascript">
 //提交工作流
    $('#tijiao').click(function () {
        
      location.href='{:url("Workflowdb/gzlsp",["workId"=>request()->param("workId"),"trackId"=>request()->param("trackId")])}'
      return false
     
    })
    var $ObjectNum =$(".ObjectNum");
             toNum($ObjectNum);

/*查看网点详情*/
    $(".btnActivity").click(function(){
          var str = $(this).html()
        
          /*console.log(tr)*/
        if(str=="查看网点详情"){
            $("#kindGather").show();
            $(this).html("收起网点详情");
          }else{
            $("#kindGather").hide();
            $(this).html("查看网点详情")
          }
           })
   /*科目详情*/
      $(".btnActivity1").click(function(){
          var str = $(this).html()
        
          /*console.log(tr)*/
        if(str=="查看科目详情"){
            $("#netGather").show();
            $(this).html("收起科目详情");
          }else{
            $("#netGather").hide();
            $(this).html("查看科目详情")
          }
           })

/*请输入关键字或空格查询*/
  var jieshou = $("#area_id");
 sousuo(jieshou);
       function sousuo(id){
            id.bsSuggest({
            allowNoKeyword: false, //是否允许无关键字时请求数据
            multiWord: true, //以分隔符号分割的多关键字支持
            separator: ",", //多关键字支持时的分隔符，默认为空格
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            jsonp: 'cb',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                var i, len, data = {
                    value: []
                };
                if (!json || !json.s || json.s.length === 0) {
                    return false;
                }

                // console.log(json);
                len = json.s.length;

                jsonStr = "{'value':[";
                for (i = 0; i < len; i++) {
                    data.value.push({
                        word: json.s[i]
                    });
                }
                data.defaults = 'baidu';

                //字符串转化为 js 对象
                return data;
            }
        });

          }
    $(document).on("click",".delthis",function(){
              var _$this=this
              console.log(_$this)
                swal({ 
              title: "", 
              text: "确定删除！", 
              type: "warning",
              showCancelButton: true, 
              confirmButtonColor: "#DD6B55",
              confirmButtonText: "确定", 
              cancelButtonText: "取消",
              closeOnConfirm: false, 
              closeOnCancel: false
            },
            function(isConfirm){ 
              if (isConfirm) { 
                // console.log(_$this);
                $(_$this).closest("tr").remove();
                swal("删除！", "成功","success"); 
               
              } else { 
                swal("取消！", "","error"); 
              } 
          });
             });

    /*passIcon*/
     $(function () {
            $(".passIcon").mouseover(function () {
                $(this).find(".shenpi").show();
            });
            $(".passIcon").mouseout(function () {
                $(this).find(".shenpi").hide();
            });
        });
//      $(function(){
//   $(".passIcon").hover(function() {
//         $(this).children(".shenpi").show();
//         var topH=$(this).offset().top-$(window).scrollTop();//hover节点到文档顶部的距离-文档被滚动的距离=节点到屏幕顶部的距离
//         var topoff=$(this).offset().top;//滚动条滚动的距离
//         var bottomH=$(window).height()-topH;//屏幕高度-节点到顶部的距离=节点到底部的距离
//         var thisShenpi=$(this).children(".shenpi").outerHeight() + 50;//得到框框的高度
//         if(thisShenpi>bottomH){//如果框框的高度大于节点到底部距离的高度，执行下面
//             $("body,html").animate({"scrollTop":topoff+"px"},100);//body滚动的高度为节点到文档顶部的距离（就相当于节点显示在屏幕最上面）
//       return;
//       /*$("body").animate({"scrollTop":topoff+"px"},100);//body滚动的高度为节点到文档顶部的距离（就相当于节点显示在屏幕最上面）
//             swal('',topH+"节点到屏幕顶部的距离---------"+topoff+"滚动条滚动的距离---------"+bottomH+"节点到底部的距离========"+thisShenpi+"框框的高度");*/
//         }
//     }, function() {
//         $(this).children(".shenpi").hide();
//     });
//     var windowHeight=$(window).height();
//     var documentHeight=$(document).height();
//     var scrollTop=$(document).scrollTop();
// })

 // function chaoSongAndArchiver(){
 //      //温馨提示：请确认此申请单是否填写无误，选择确认会立刻提交到流程，选择取消会返回修改
 //      swal({
 //        title: "",
 //        text: "温馨提示:请确认是否归档？归档后将无法修改数据，请确认无误后再归档。",
 //        type: "warning",
 //        showCancelButton: true,
 //        confirmButtonColor: "#DD6B55",
 //        confirmButtonText: "确定",
 //        cancelButtonText: "取消",
 //        closeOnConfirm: false
 //      },function(isConfirm){
 //          swal.disableButtons();//按钮不可点击
 //          if(isConfirm){
 //            //设置自动补全的值
 //              var autoContentIds=getAutoCompleteIds('autoContent');
 //              var autoContentNames=getAutoCompleteNames('autoContent');
 //              $('#ccAuditorName').val(autoContentNames);
 //              $('#ccAuditorId').val(autoContentIds);
 //              document.form1.transitionName.value = "归档";
 //              document.form1.action="/xiaolutong/costreimbur.do?command=process";
 //              document.form1.submit();
 //              showProcess();
 //              swal.close();
 //          }
            
 //      });
     
      
 //   }
</script>
</body>

</html>